<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"	rel="stylesheet">
<link   href="${pageContext.request.contextPath}/themes/icon.css"	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script	src="${pageContext.request.contextPath}/js/jquery.backstretch.js"></script>
</head>
<script type="text/javascript">
	$(function() {
		
		//设置全屏背景图片
		 
		$.backstretch("${pageContext.request.contextPath}/img/backgrounds/2.jpg")

		// 配置搜索框
		
	   $('#searchEmployee').searchbox({
	    	searcher : function(value, name) { 
				$('#employeeMsg').datagrid('reload', {
					searchname : value,
					searchtype : name
				});
	    		    },  
	    		    menu:'#mm',  
	    	        prompt:'请输入要查询的值...'    
      });
		
        // 配置取消搜索     传个空值过去
        $("#cancleSearch").click(function(){
        	$('#searchEmployee').searchbox('clear');
        	$('#employeeMsg').datagrid('reload', {
        		
			});   			
        });
		
		//配置数据表格
		$('#employeeMsg').datagrid({
			url : '${pageContext.request.contextPath}/selectEmyployee',
			columns : [ [ {
				field : 'e_id',
				title : '员工表编号',
				width : 60,
				hidden : true
			}, {
				field : 'e_number',
				title : '编号',
				width : 60,
				align : 'center'
			},{
				field : 'role_id',
				title : '角色编号',
				width : 60,
				align : 'center',
				hidden : true
			}, {
				field : 'e_name',
				title : '姓名',
				width : 60,
				align : 'center'
			}, {
				field : 'e_sex',
				title : '性别',
				width : 60,
				align : 'center'
			},{
				field : 'e_age',
				title : '年龄',
				width : 60,
				align : 'center'
			},{
				field : 'e_tel',
				title : '电话',
				width : 110,
				align : 'center'
			},{
				field : 'e_email',
				title : '邮箱',
				width : 110,
				align : 'center'
			},{
				field : 'e_address',
				title : '地址',
				width : 80,
				align : 'center'
			},{
				field : 'e_birthday',
				title : '生日',
				width : 100,
				align : 'center'
			},{
				field : 'e_entrydate',
				title : '进入公司时间',
				width : 100,
				align : 'center'
			},{
				field : 'e_description',
				title : '员工描述',
				width : 160,
				align : 'center'
			},{
				field : 'dept_name',
				title : '所属部门',
				width : 60,
				align : 'center'
			},{
				field : 'dept_id',
				title : '部门编号',
				width : 60,
				align : 'center',
				hidden : true
			},] ],
			pagination : true,
			striped : true,
			rownumbers : true,
			fitColumns : true,
			autoRowHeight : true,
			resizeHandle : 'right',
			nowrap : true
		});
		
		//配置导入表单事件
		$("#uploadEmployees").form({
			 url:'${pageContext.request.contextPath}/uploadEmployees', 
			 success:function(data){  
				 if(data=="1"){
					 $("#uploadExcel").filebox('clear');
					 $.messager.alert('提示','导入成功！','info',function(){
						 $('#employeeMsg').datagrid('reload');
					 });
				 }
				 else{
					 $("#uploadExcel").filebox('clear');
					 $.messager.alert('提示','导入失败！','info',function(){
						 $('#employeeMsg').datagrid('reload');
					 });
				 }
					 
			 }
		 });
		
		//配置文件筐
		$('#uploadExcel').filebox({    
		    buttonText: '选择文件', 
		    
		});
		
	});
	
	//配置导入提交事件
	function uploadExcel() {
		//得到上传文件的全路径  
        var fileName= $('#uploadExcel').filebox('getValue'); 
        if(fileName==""){     
            $.messager.alert('提示','请选择上传文件！','info');   
         }else{  
             //对文件格式进行校验  
             var d1=/\.[^\.]+$/.exec(fileName); 
             if(d1==".xls"){ 
            	 //提交导入表单事件
				$("#uploadEmployees").form('submit');
				
             }
             else{
            	 $.messager.alert('提示','请选择xls格式文件！','info'); 
            	 $("#uploadExcel").filebox('clear');
             }
         }
	}
</script>
<body>
   <div style="margin-top: 35px"></div>
	<input id="searchEmployee" class="easyui-searchbox"
		data-options="prompt:'输入查询信息',width:250,height:30,menu:'#mm'" >
		<div id="mm" style="width:120px">
		    <div data-options="name:'byname',iconCls:'icon-ok'" id="byname">按名字查询</div>
		    <div data-options="name:'bydept',iconCls:'icon-save'" id="bydept">按部门查询</div>
		</div>
		<a id="cancleSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back',height:30">返回</a>  
		
		<!-- 导入文件表单 -->
		<div style="float: right;margin-right: 5px">
			<form id="uploadEmployees"  method="post" enctype="multipart/form-data">  
	           <input id="uploadExcel" name="uploadExcel" class="easyui-filebox" data-options="prompt:'请选择要导入的文件...',width:250,height:30">  
	       　    　       <a href="#" class="easyui-linkbutton" data-options="width:50,height:30"  onclick="uploadExcel()" >导入</a> 　
	      <!-- <a href="#" class="easyui-linkbutton" data-options="width:50,height:30"  onclick="expertExcel()" >导出</a> 　    　　-->　　　      
	       </form> 
        </div>
        
    <p style="text-align: center;font-family: inherit;font-size: 25px">员工信息一览表</p>
	<table id="employeeMsg" title="员工信息表"></table>
	
</body>
</html>